/*
 * @Author: 谢陈洁
 * @Date: 2025-08-01 11:03:50
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 11:28:39
 * @Description: file content
 */
import * as echarts from 'echarts'
export type ChartType = 'line' | 'bar' | 'pie' | 'radar' | 'mixed'
export function useChart<T extends ChartType>(
  chartType: T, data: any, options: any={}) { 
    // 基础配置
    const baseOption = ref<echarts.EChartsOption>({
      // 提示框
      tooltip: options.tooltip || {type:'axis', trigger: 'axis'},
      // 配置项
      grid: options.grid || {left: '3%', right: '4%', bottom: '3%', containLabel: true},
      // 图例
      legend: options.legend || { data:data.series.map((item:any) => item.name) },
    })
    // 根据图表类型生成配置项
    const chartOption = computed<echarts.EChartsOption>(() => { 
      switch (chartType) {
        case 'line':
          return {
            ...baseOption,
            xAxis: {
              type: 'category', // x轴类型
              boundaryGap: false, // 刻度是否从0开始
              data: data.labels || [] // x轴数据
            },
            yAxis: {
              // y轴
              type: 'value' // y轴类型
            },
            series: data.series.map((item: any) => {
              // series数据
              return {
                name: item.name, // series名称
                type: 'line', // 折线类型
                data: item.data, // 数据
                smooth: true, // 折线是否平滑
                itemStyle: {
                  // 折线颜色
                  color: item.color || '#000'
                },
                areaStyle: {
                  // 折线区域填充颜色
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: `${item.color}80` },
                    { offset: 1, color: `${item.color}10` }
                  ])
                },
                lineStyle: {
                  // 折线
                  width: 3 // 折线宽度
                }
              }
            })
          }
        case 'bar':
          return {
            ...baseOption.value,
            xAxis: {
              type: 'category',
              data: data.labels
            },
            yAxis: { type: 'value' },
            series: data.series.map((s: any) => ({
              name: s.name,
              type: 'bar',
              data: s.data,
              barWidth: '60%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: s.color },
                  { offset: 1, color: `${s.color}99` }
                ])
              }
            }))
          }

        case 'pie':
          return {
            ...baseOption.value,
            tooltip: { type: 'item' },
            legend: { orient: 'horizontal', left: 'center', top: 'bottom' },
            series: data.series.map((s: any) => ({
              name: s.name,
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: { show: false, position: 'center' },
              emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
              labelLine: { show: false },
              data: s.data.map((item: any) => ({
                ...item,
                itemStyle: { color: item.color }
              }))
            }))
          }

        case 'radar':
          return {
            ...baseOption.value,
            tooltip: { trigger: 'item' },
            radar: {
              indicator: data.indicator
            },
            series: data.series.map((s: any) => ({
              name: s.name,
              type: 'radar',
              data: [
                {
                  value: s.value,
                  name: s.name,
                  areaStyle: { color: `${s.color}20` },
                  lineStyle: { color: s.color },
                  itemStyle: { color: s.color }
                }
              ]
            }))
          }

        default:
          return baseOption.value
      }
    })
    const updateChartData = (newData: any) => {
      Object.assign(data, newData)
    }
    return {
      chartOption,
      updateChartData
    }
}
